<!-- 表行 》 标题 》 按钮 -->

<template>
  <el-button :size="parentWeb.size" type="text" @click.stop="toClick">{{ value }}</el-button>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixPath from '../../../mixPath'
import mixRow from '../../mixRow'
import UTIL from '../../RowOperate/UTIL'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'TitleBtn',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixPath],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: {
    ...CORE.WEB.RowCommon,
    ...CORE.WEB.RowTitle,
    row: { type: Object, required: true }, // 行数据
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父级的 Web 组件
     */
    parentWeb: mixRow.computed.parentWeb,

    /**
     * 模块路径
     */
    path: mixRow.computed.path,

    /**
     * 路由路径
     */
    routePath() {
      const { to, row } = this
      return UTIL.getRoutePath(to, row)
    },

    /**
     * 绑定值
     */
    value() {
      const { row, bind, getValue } = this
      return getValue(row, bind)
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 获取绑定值
     */
    getValue: mixRow.methods.getValue,

    /**
     * 点击
     */
    toClick() {
      const { to, $router, onShow, onEdit, row, newOne, modal, commit } = this
      const mid = newOne ? 'NewOne' : ''

      if (to) {
        $router.push(to)
      } else if (modal === 'show') {
        if (onShow) onShow(row)
        else commit(`open${mid}Show`, row)
      } else if (modal === 'edit') {
        if (onEdit) onEdit(row)
        else commit(`open${mid}Edit`, row)
      }
    },
  },
}
</script>
